<template>
    <div class="main-body">
        <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item v-for="(item, index) in items" :key="index" :title="item.text" />
        </van-sidebar>
        <div class="content">
            <div v-for="(item, index) in items" class="content-item" v-if="index == activeKey">
                <h4 class="content-head">{{ item.text }}</h4>
                <div class="flex-content">
                    <div class="flex-item" v-for="(item, index) in item.cate_child" :key="index" @click="getSearch(item.id)">
                        <van-image
                            width="70px"
                            height="auto"
                            :src="item.image"
                        />
                        <p class="item-des"> {{ item.text }} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Sidebar, SidebarItem } from 'vant';
import { Image } from 'vant';

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Image);
export default {
    name: "tree",
    props: ['items'],
    data() {
        return {
            activeKey: 0,
            list: []
        }
    },
    methods: {
        onChange(index) {

        },
        getSearch: function (name) {
            this.$router.push({name: 'search_page', params: {'name': name}})
        },
    }
}
</script>
<style scoped>
    .content{
        width: 77%;
    }
    .content-head{
        margin-left: 5px;
        font-size: 14px;
    }
    .main-body{
        display: flex;
    }
    .flex-content{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .flex-item{
        width: 33%;
        text-align: center;
        margin-bottom: 10px;
    }
    .item-des{
        margin-top: 0;
        font-size: 13px;
    }
</style>
